<template>
  <div class="form-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
               label-position="left">
        <el-col :span="24">
          <el-form-item label="包名" prop="packageName">
            <el-input v-model="formData.packageName" placeholder="提示：com.landray.sany.custom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模块名" prop="moduleName">
            <el-input v-model="formData.moduleName" placeholder="提示：sany-custom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类名" prop="className">
            <el-input v-model="formData.className" placeholder="提示：SanyCustom" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="作者" prop="author">
            <el-input v-model="formData.author" placeholder="提示：custom" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="权限角色" prop="roleName">
            <el-input v-model="formData.roleName" placeholder="提示：ROLE_CONFIG_SETTING" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配置名称" prop="labelName">
            <el-input v-model="formData.labelName" placeholder="提示：定制集成配置" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="功能介绍" prop="functionName">
            <el-input v-model="formData.functionName" placeholder="请输入功能介绍" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模块名-前端" prop="frontModuleName">
            <el-input v-model="formData.frontModuleName" placeholder="提示：sany-config" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="总路径-前端" prop="pathName">
            <el-input v-model="formData.pathName" placeholder="提示：sanyConfig" clearable
                      :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="包路径-前端" prop="lastName">
            <el-input v-model="formData.lastName" placeholder="提示：custom" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large" class="button-group">
            <el-button type="primary" @click="generateDivFile">生成前端页面代码</el-button>
            <el-button type="primary" @click="generateCodeFile">生成后端配置代码</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        packageName: 'com.landray.xxx',
        moduleName: 'sany-xxx',
        className: 'Sanyxxx',
        author: 'hebq',
        roleName: 'ROLE_CONFIG_SETTING',
        labelName: 'XXX集成配置',
        functionName: 'XXX集成配置',
        frontModuleName: 'sany-xxx',
        pathName: 'sanyConfig',
        lastName: 'xxx',
      },
      rules: {
        packageName: [{
          required: true,
          message: '提示：com.landray.sany.custom',
          trigger: 'blur'
        }],
        moduleName: [{
          required: true,
          message: '提示：sany-custom',
          trigger: 'blur'
        }],
        className: [{
          required: true,
          message: '提示：SanyCustom',
          trigger: 'blur'
        }],
        author: [{
          required: true,
          message: '提示：custom',
          trigger: 'blur'
        }],
        roleName: [{
          required: true,
          message: '提示：ROLE_CONFIG_SETTING',
          trigger: 'blur'
        }],
        labelName: [{
          required: true,
          message: '提示：定制集成配置',
          trigger: 'blur'
        }],
        functionName: [{
          required: true,
          message: '请输入功能介绍',
          trigger: 'blur'
        }],
        frontModuleName: [],
        pathName: [],
        lastName: [],
      },
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    generateCodeFile() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const formData = this.formData;
        console.log('formData',formData)
        const packageName = formData.packageName
        const className = formData.className
        const moduleName = formData.moduleName
        const roleName = formData.roleName
        const labelName = formData.labelName
        const author = formData.author
        const functionName = formData.functionName
        this.$download.zip("/tool/generate/config?packageName="+ encodeURIComponent(packageName) +
          '&className=' + encodeURIComponent(className) + '&moduleName=' + encodeURIComponent(moduleName) +
          '&roleName=' + encodeURIComponent(roleName) + '&labelName=' + encodeURIComponent(labelName) +
          '&author=' + encodeURIComponent(author) + '&functionName=' + encodeURIComponent(functionName), this.formData.moduleName+"-code.zip");
      })
    },
    generateDivFile() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
        const formData = this.formData;
        console.log('formData',formData)
        const pathName = formData.pathName
        const lastName = formData.lastName
        const className = formData.className
        const moduleName = formData.moduleName
        const frontModuleName = formData.frontModuleName
        const labelName = formData.labelName
        this.$download.zip("/tool/generate/configDiv?pathName="+ encodeURIComponent(pathName) +
          '&className=' + encodeURIComponent(className) + '&frontModuleName=' + encodeURIComponent(frontModuleName) +
          '&moduleName=' + encodeURIComponent(moduleName) +
          '&lastName=' + encodeURIComponent(lastName) + '&labelName=' + encodeURIComponent(labelName), this.formData.moduleName+"-ui.zip");
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
.form-container {
  max-width: 800px; /* 按需调整最大宽度 */
  margin: 100px auto;
  display: flex;
  justify-content: center;
}

</style>
